<template>
	<view class="model_box">
		<uni-popup :mask-click="maskClick" type="dialog" safe-area ref="modalRef">
			<view class="popup-content modal_content">
				<view class="title">
					<slot name="title"></slot>
				</view>
				<view class="info_content">
					<slot name="content"></slot>
				</view>
				<view class="btn_box" v-if="isShowFooter">
					<slot name="okCancelBtn">
						<MyButton :bgc="primary_orther_color" :clickFun="cancelFun">
							取消
						</MyButton>
						<MyButton :clickFun="okFun">
							确认
						</MyButton>
					</slot>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref , watch} from "vue"
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	
	import {
		openMessageAuth
	} from '@/utils/messageAuth.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_text_color,
		primary_modal_bgc,
		primary_border_color,
		primary_orther_color
	} = dynamicStyle_store.globalStyle
	
	const props = defineProps({
		openModalFlag:{
			type:Number
		},
		okFun:{
			type:Function
		},
		cancelFun:{
			type:Function
		},
		isShowFooter:{
			type:Boolean,
			default:true
		},
		modalBgc:{
			type:String,
			default:'#FFFFFF'
		},
		maskClick:{
			type:Boolean,
			default:true
		}
	})
	
	const modalRef = ref()
	
	watch(()=>props.openModalFlag,()=>{
		if(props.openModalFlag>0){
			modalRef.value.open('center')
		}else{
			modalRef.value.close()
		}
	})
	
	//关闭弹窗
	const cancelFun=()=>{
		modalRef.value.close()
		if(props.cancelFun){
			props.cancelFun()
		}
	}
	
	//确认后关闭弹窗
	const okFun=()=>{
		props.okFun()
		modalRef.value.close()
	}
	
</script>

<style lang="less">
	.model_box{
		z-index: 9999999999;
	}
	.modal_content{
		width: calc(84vw);
		overflow: hidden;
		background-color: v-bind(modalBgc);
		border-radius:16rpx;
		padding: 20rpx;
		z-index: 20;
		.title{
			font-size: 36rpx;
			color: v-bind(primary_text_color);
			width: 100%;
			margin: 20rpx 0;
			display: flex;
			justify-content: center;
		}
		.info_content{
			margin: 0 20rpx;
			max-height: calc(50vh) !important;
			overflow-y: scroll;
		}
		.btn_box{
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-around;
		}
	}
</style>